<template>
  <div>
<!--    <el-button plain @click="handleBtnClick(true)">可用</el-button>-->
<!--    <el-button plain @click="handleBtnClick(false)">占用</el-button>-->
<!--    <el-button plain @click="handleBtnClick(null)">维修中</el-button>-->
<!--    <el-button plain @click="handleBtnClick('')">全部</el-button>-->

    <button v-for="(btn,index) in btns" :class="{active:curIndex === index}"
               @click="curIndex = index; handleBtnClick(btn.available)">
      {{ btn.name }}
    </button>

    <!--<el-button plain @click="addRoom">添加会议室</el-button>-->
  </div>
</template>

<script>
export default {
  name: 'RoomButtons',
  data() {
    return {
      curIndex: 3,
      btns: [
        {
          name: '可用',
          available: true,
        },{
          name: '占用',
          available: false,
        },{
          name: '维修中',
          available: null,
        },{
          name: '全部',
          available: '',
        },
      ]
    }
  },
  methods: {
    handleBtnClick: function (available) {
      this.$emit('isAvailable', available)
    }
    // ,
    // addRoom: function () {
    //   this.$emit('addRoom')
    // }
  }
}
</script>

<style scoped>
.active {
  background: rgba(215, 52, 31, 0.1);
  color: black;
}

button {
  padding: 0;
  width: 70px;
  height: 40px;
  border-radius: 6px;
  margin-right: 20px;
}
</style>
